
<div class="container fLeft" style="width:530px; margin:10px 0 0 30px; padding:10px; background-color:#fff;">

  <div id="tab-panel" class="rel">
    <div id="tab1" class="tab enabled selected" onclick="gotoTab(1)">Info</div>
    <div id="tab2" class="tab<?php echo empty($album_id) ? '' : ' enabled' ; ?>" onclick="gotoTab(2)">Add Photo</div>
    <div id="tab3" class="tab<?php echo empty($album_id) ? '' : ' enabled' ; ?>" onclick="gotoTab(3)">Edit Photo</div>
    <div style="clear:both;"></div>
    <div class="abs" style="top:22px; right:5px; font-weight:bold;"><a href="javascript:history.back(1);">&lt; back</a></div>
  </div>

    <div id="album-wrap" style="width:530px; height:550px; padding-bottom:10px;"><div style="margin-top:10px; padding:6px;"><?php __('loading..'); ?></div></div>

    <div id="upload-wrap" style="display:none; width:530px; height:550px; margin-top:10px;">
      <form action="<?php e($uploadURL); ?>" method="post" enctype="multipart/form-data" id="form-upload">
        <fieldset id="fupload-fallback" style="margin-top:10px;">
          <legend><?php __('File Upload'); ?></legend>
          <p><?php __('Select photo from you computer and start uploading.'); ?></p>
          <label for="fupload-photoupload">
            <?php __('Upload a Photo:'); ?>
            <input type="file" name="Filedata" />
          </label>
        </fieldset>

        <div id="fupload-status" class="hide">
          <div>
            <strong class="overall-title"></strong><br />
            <img src="<?php e($this->base); ?>/css/FancyUpload/images/bar.gif" class="progress overall-progress" />
          </div>
          <div style="margin-top:8px;">
            <strong class="current-title"></strong><br />
            <img src="<?php e($this->base); ?>/css/FancyUpload/images/bar.gif" class="progress current-progress" />
          </div>
          <div class="current-text"></div>
          <div style="margin-top:10px;"><?php __('Photos will be uploaded in a queue, after selecting the photos start the upload.'); ?></div>

          <div style="border: 1px solid #777E85; margin-bottom:12px;">
            <ul id="fupload-list"></ul>
            <input type="button" id="fupload-clear" value="<?php __('Clear List'); ?>" style="font-size:12px; margin:3px 5px 2px;" />
          </div>
          <div id="fupload-browse"></div>
          <div id="fupload-upload"></div>
          <div style="clear:both;"></div>
        </div>
      </form>
    </div>

    <form id="edit-photo-form" action="<?php e($this->base); ?>/images/edit" method="post" style="display:none; width:530px; height:550px; overflow:auto; margin-top:10px;" onsubmit="return editPhoto()">
      <div id="edit-photo"><?php if (isset($data)) {
      foreach ($data as $d) {
          $checked = ($cover == $d['Image']['id'])?' checked':''; ?>
        <div id="photo-<?php e($d['Image']['id']); ?>" style="border:1px solid #D8DFEA; margin:2px 5px; padding:10px;">
          <div style="float:left;">
            <table cellpadding="2" cellspacing="0" border="0" style="color:#666;">
              <tr>
                <td><b><?php __('Title'); ?>:</b></td>
                <td><input type="text" name="title_<?php e($d['Image']['id']); ?>" value="<?php e($d['Image']['title']); ?>" class="input" style="width:180px;" /></td>
              </tr>
              <tr>
                <td valign="top"><b><?php __('Description'); ?>:</b></td>
                <td><textarea rows="5" cols="20" name="desc_<?php e($d['Image']['id']); ?>" class="input" style="width:180px; height:127px;"><?php e($d['Image']['description']); ?></textarea></td>
              </tr>
            </table>
          <div id="photo-msg-<?php e($d['Image']['id']); ?>" class="red"></div>
        </div>
        <div style="width:181px; float:right;">
          <img src="<?php e($this->base); ?>/img/<?php e($type); ?>/s_<?php e($d['Image']['filename']); ?>" />
          <div style="border:1px solid #ccc; padding:3px; margin-top:2px;">
            <label><input type="radio" name="cover" value="<?php e($d['Image']['id']); ?>"<?php e($checked); ?> /> <?php __('This is the album cover.'); ?></label>
            <label><input type="checkbox" id="delete_<?php e($d['Image']['id']); ?>" onclick="deleteImg(<?php e($d['Image']['id']); ?>)" /> <?php __('Delete this photo.'); ?></label>
          </div>
        </div>
        <div style="clear:both;"></div>
      </div>
<?php }
    } ?></div>
      <div style="margin-top:10px; text-align:center;">
        <input type="submit" value="<?php __('Save Changes'); ?>" />
        <input type="hidden" id="album_id" name="album_id" value="<?php e($album_id); ?>" />
      </div>
    </form>

</div>
<div style="clear:both;"></div>

<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
var _template = '<div id="photo-{id}" style="display:none; border:1px solid #D8DFEA; margin:2px 5px; padding:10px;">'+
                  '<div style="float:left;">' +
                    '<table cellpadding="2" cellspacing="0" border="0" style="color:#666;">' +
                      '<tr>' +
                        '<td><b><?php __('Title'); ?>:</b></td>'+
                        '<td><input type="text" name="title_{id}" class="input" style="width:180px;" /></td>' +
                      '</tr>' +
                      '<tr>' +
                        '<td valign="top"><b><?php __('Description'); ?>:</b></td>' +
                        '<td><textarea rows="5" cols="20" name="desc_{id}" class="input" style="width:180px; height:127px;"></textarea></td>' +
                      '</tr>' +
                    '</table>' +
                    '<div id="photo-msg-{id}" class="red"></div>' +
                  '</div>' +
                  '<div style="width:181px; float:right;">' +
                    '<img src="<?php e($this->base); ?>/img/{thumb}" />' +
                    '<div style="border:1px solid #ccc; padding:3px; margin-top:2px;">' +
                      '<label><input type="radio" name="cover" value="{id}" {checked}/> <?php __('This is the album cover.'); ?></label>' +
                      '<label><input type="checkbox" id="delete_{id}" onclick="deleteImg({id})" /> <?php __('Delete this photo.'); ?></label>' +
                    '</div>' +
                  '</div>' +
                  '<div style="clear:both;"></div>' +
                '</div>';
var _confirm  = '<?php __('Are you sure you want to delete this image?'); ?>';

function init () {
    _template = new Ext.Template(_template);
    loadContent(<?php e($album_id); ?>);
<?php if ($album_id) { ?>
    initUpload();
<?php } ?>
} // init

function initUpload () {
    var up = new FancyUpload2($('fupload-status'), $('fupload-list'), {
              verbose: true,
              url: Ext.fly('form-upload').dom.action,
              path: _webroot+'/js/FancyUpload/Swiff.Uploader.swf',
              //multiple: false,
              //queued: false,
              //fileSizeMax: 100000,
<?php if (isset($limitFiles)) { ?>
              fileListMax: <?php e($limitFiles); ?>,
<?php } ?>
              typeFilter: {
                  '<?php __('Images'); ?> (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
              },
              target: 'fupload-browse',

              onLoad: function() {
                  $('fupload-status').removeClass('hide');
                  $('fupload-fallback').destroy();

                  this.target.addEvents({
                      click: function() {
                          return false;
                      },
                      mouseenter: function() {
                          this.addClass('hover');
                      },
                      mouseleave: function() {
                          this.removeClass('hover');
                          this.blur();
                      },
                      mousedown: function() {
                          this.focus();
                      }
                  });

                  $('fupload-clear').addEvent('click', function() {
                      up.remove();
                      Ext.select('li.validation-error', false, 'fupload-list').remove();
                      return false;
                  });
                  $('fupload-upload').addEvent('click', function() {
                      up.start();
                      return false;
                  });
              },

              onSelectFail: function(files) {
                  files.each(function(file) {
                      new Element('li', {
                          'class': 'validation-error',
                          html: file.validationErrorMessage || file.validationError,
                          title: MooTools.lang.get('FancyUpload', 'removeTitle'),
                          events: {
                              click: function() {
                                  this.destroy();
                              }
                          }
                      }).inject(this.list, 'top');
                  }, this);
              },

              onFileSuccess: function(file, response) {
                  var json = new Hash(JSON.decode(response, true) || {});

                  if (json.get('status') == '1') {
                      file.element.addClass('file-success');
                      file.info.set('html', '<strong>Image was uploaded:</strong> '+json.get('width')+' x '+json.get('height')+'px, <em>'+json.get('mime')+'</em>');
                      uploadedImage(json.get('id'), json.get('thumb'));
                  } else {
                      file.element.addClass('file-failed');
                      file.info.set('html', '<strong>An error occured:</strong> '+(json.get('error') ? (json.get('error')+' #'+json.get('code')) : response));
                  }
              },

              onComplete: function () {
                  gotoTab(3);
              },

              onFail: function(error) {
                  switch (error) {
                      case 'hidden':
                          alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
                          break;
                      case 'blocked':
                          alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
                          break;
                      case 'empty':
                          alert('A required file was not found, please be patient and we fix this.');
                          break;
                      case 'flash':
                          alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
                  }
              }
    });
} // initUpload

function gotoTab (t) {
    if (!Ext.fly('album_id').getValue()) {
        return false;
    }

    Ext.select('div.tab', false, 'tab-panel').removeClass('selected');
    Ext.fly('tab'+t).addClass('selected');

    Ext.fly('album-wrap').setStyle({ display:'none' });
    Ext.fly('upload-wrap').setStyle({ display:'none' });
    Ext.fly('edit-photo-form').setStyle({ display:'none' });

    if (t == 1) {
        Ext.fly('album-wrap').fadeIn({ easing:'easeOut' });
    } else if (t == 2){
        Ext.fly('upload-wrap').fadeIn({ easing:'easeOut' });
    } else {
        Ext.fly('edit-photo-form').fadeIn({ easing:'easeOut' });
    }
} // gotoTab

function uploadedImage (id, thumb) {
    var html;

    /*if (!Ext.fly('edit-photo-form').isVisible()) {
        html = _template.apply({
            id: id,
            thumb: thumb,
            checked: 'checked '
        });

        Ext.fly('edit-photo-form').fadeIn({
            easing: 'easeOut',
            callback: function() {
                Ext.fly('edit-photo').insertHtml('afterBegin', html);
                Ext.fly('photo-'+id).slideIn('t', { easing:'easeOut' });
            }
        });
    } else {*/
        html = _template.apply({
            id: id,
            thumb: thumb
        });

        Ext.fly('edit-photo').insertHtml('beforeEnd', html);
        Ext.fly('photo-'+id).slideIn('t', { easing:'easeOut' });
    //}
} // uploadedImage

function editPhoto () {
    var message = Ext.get('message');

    transId = Ext.Ajax.request({
        form: 'edit-photo-form',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (obj.status == false) {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.addClass('error').slideIn().highlight();
                }
            } else {
                if (obj.mesg) {
                    scrollUp(100);
                    message.hide().update(obj.mesg);
                    message.addClass('success').pause(1).slideIn().highlight().pause(5).slideOut('t', { useDisplay:true });
                }
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-photo-form'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-photo-form'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Saving..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }

    return false;
} // editPhoto

function deleteImg (id) {
    Ext.fly('photo-'+id).setOpacity(.5).addClass('bgHighlight');
    var answer = confirm(_confirm);

    if (!answer) {
        Ext.fly('photo-'+id).removeClass('bgHighlight').setOpacity(1);
        Ext.fly('delete_'+id).dom.checked = false;
        return;
    }

    Ext.fly('photo-'+id).switchOff({
        easing: 'easeIn',
        useDisplay: true
    });

    transId = Ext.Ajax.request({
        url: _webroot+'/images/remove',
        method: 'POST',
        params: 'id='+id,
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);

            if (obj.status == true) {
                Ext.fly('photo-'+id).remove();
            } else {
                Ext.fly('delete_'+id).dom.checked = false;
                Ext.fly('photo-'+id).removeClass('bgHighlight').slideIn('t', {
                    easing: 'easeOut',
                    callback: function() {
                        if (obj.error) {
                            Ext.fly('photo-msg-'+id).highlight().update(obj.error);
                        }
                    }
                });
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-photo-form'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-photo-form'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Deleting..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }
} // deleteImg


function scrollUp (speed, current) {
    if (typeof(current) == 'undefined') {
        if (typeof(window.pageYOffset) == 'number') {
            current = window.pageYOffset;
        } else if (document.body && document.body.scrollTop) {
            current = document.body.scrollTop;
        } else if (document.documentElement && document.documentElement.scrollTop) {
            current = document.documentElement.scrollTop;
        }
    }

    var y = current - speed;
    var s = speed;

    if (y < 0) {
        y = 0;
    }

    window.scrollTo(0, y);

    if (y > 0) {
        setTimeout(function(){
            scrollUp(s, y);
        }, 1);
    }
} // scrollUp

function message (msg, focus) {
    alert(msg);

    if (typeof focus != 'undefined') {
        Ext.fly(focus).focus();
    }
} // message

function cleanError (form) {
    Ext.fly('message').setStyle({ display:'none' }).removeClass('error');
    Ext.select('.invalid', false, form).removeClass('invalid');
    Ext.select('div.invalidField', false, form).remove();
    Ext.select('.invalidText', false, form).removeClass('invalidText');
} // cleanError

function validation (form) {
    var proceed = true;
    var focuson = '';

    cleanError(form);
    Ext.each(Ext.select('.req', false, form).elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('td').prev('td').addClass('invalidText');

            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    return proceed;
} // validation

function errorFields (error) {
    var focuson = '';

    Ext.each(error, function(e) {
        var el  = Ext.get(e.id);
        var err = '<div class="invalidField" style="display:none;">'+e.code+'</div>';
            el.addClass('invalid');
            el.prev('td').addClass('invalidText');
            el.insertHtml('afterEnd', err);
            el.next('div.invalidField').slideIn('t', {
                duration:.4
            });
            if (e.clear) {
                el.dom.value = '';
            }
            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
    });
} // errorFields

<?php $this->addScript('Ext.onReady(function() { init(); });'); ?>
</script>